<template>
  <div style="width: 100%; height: 26%">
    <span style="font-size: 16px">稼动率</span>
    <div style="width: 100%; height: 90%" ref="jdlRef"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.setJdl();
  },
  methods: {
    setJdl() {
      const myChart = this.$echarts.init(this.$refs.jdlRef);
      const option = {
        // title: {
        //   text: "稼动率",
        //   textAlign: "auto",
        //   textStyle: {
        //     color: "#FFF",
        //   },
        // },
        series: [
          {
            type: "gauge",
            progress: {
              show: true,
              width: 13,
            },
            axisLine: {
              lineStyle: {
                width: 13,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              length: 8,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            axisLabel: {
              distance: 16,
              color: "#999",
              fontSize: 9,
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 22,
              itemStyle: {
                borderWidth: 6,
              },
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              fontSize: 25,
              offsetCenter: [0, "50%"],
            },
            data: [
              {
                value: 50,
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>
